import React, { Fragment } from 'react';
import { Tabs, Form, Input, DatePicker, Row, Col } from 'antd';
import moment from 'moment';

import styles from './SamplesSearch.less';

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const { Search } = Input;

interface TabConfigProps {
  key: string;
  label: string;
}

const TABS_CONFIG: TabConfigProps[] = [
  { key: '', label: '全部' },
  { key: 'labeled', label: '已标注' },
  { key: 'unlabeled', label: '未标注' },
  { key: 'canlabeled', label: '可标注' },
];

interface Props {
  onTabsChange: (activeKey: string) => void;
  onSearch: (value: any, key: string) => void;
  taskId: string | number | undefined;
}

const SamplesSearch: React.FC<Props> = props => {
  const { onTabsChange, onSearch, taskId } = props;

  return (
    <Fragment>
      {taskId &&
        <Tabs size='large' animated={{ inkBar: true, tabPane: true }} onChange={onTabsChange} style={{ margin: 0 }}>
          {TABS_CONFIG.map((item: TabConfigProps) => (
            <TabPane key={item.key} tab={item.label}></TabPane>
          ))}
        </Tabs>
      }
      <Row className={styles.searchBox} style={{ marginTop: 16 }}>
        <Col xxl={6} lg={12} md={24} className={styles.col}>
          <Form.Item label='创建时间'>
            <RangePicker
              showTime
              onChange={dates => onSearch(dates, 'createdTime')}
              disabledDate={current => current > moment().endOf('day')}
              style={{ width: '100%' }}
            />
          </Form.Item>
        </Col>
        {taskId &&
          <Col xxl={6} lg={12} md={24} className={styles.col}>
            <Form.Item label='标注时间'>
              <RangePicker
                showTime
                onChange={dates => onSearch(dates, 'annotTime')}
                disabledDate={current => current > moment().endOf('day')}
                style={{ width: '100%' }}
              />
            </Form.Item>
          </Col>
        }
        {taskId &&
          <Col xxl={6} lg={12} md={24} className={styles.col}>
            <Form.Item label='标注员'>
              <Search
                placeholder='请输入标注员姓名'
                enterButton
                onSearch={value => onSearch(value, 'assign')}
                allowClear
              />
            </Form.Item>
          </Col>
        }
        <Col xxl={6} lg={12} md={24} className={styles.col}>
          <Form.Item label='图片名称'>
            <Search
              placeholder='请输入图片名称'
              enterButton
              onSearch={value => onSearch(value, 'imageName')}
              allowClear
            />
          </Form.Item>
        </Col>
      </Row>
    </Fragment>
  )
}

export default SamplesSearch;